<template>
  <view>
  <view :class="['message-all-'+ message.flow]" v-if="message.flow">
		<view class="message-audio" :style="{'width':time + 'px'}" :class="['content content-' + message.flow]"  @click.stop="handlePlay">
		  <view v-if="message.flow == 'out'">{{data.second}}″</view>
			<view
		    class="audio-style"
		    :class="{'add-animation': isPlay}"
				v-if="message.flow === 'out'"
		  >
		    <view class="large"></view>  
		    <view class="middle"></view> 
				<view class="small"></view>
		  </view>
			<view
			  class="audio-style"
			  :class="{'add-animation': isPlay}"
				v-if="message.flow === 'in'"
			>
			  <view class="small"></view>
			  <view class="middle"></view>
			  <view class="large"></view>
			</view>
		  <view v-if="message.flow == 'in'">{{data.second}}″</view>
		</view>
   <!-- <view class="message-audio" :class="['content content-' + message.flow]"  @click="handlePlay">
    <image v-if="message.flow==='in'" class="audio-icon audio-icon-in" src="../../../../assets/icon/audio-play.svg"></image>
		<view>{{data.second}}s</view>
		<image v-if="message.flow==='out'" class="audio-icon " src="../../../../assets/icon/audio-play.svg"></image> -->
  <!-- </view> -->
	<view :class="['message1-'+message.flow]" v-if="message.ID===mid&&audiotext!=''">
		<view class="text">{{audiotext}}</view>
		<view class="separate"></view>
		<view class="imgg">
		<image @click="close" v-if="message.ID===mid&&audiotext!=''" class="imag" src="../../../../../../static/images/shouqi.png"></image>
		</view>
	</view> 
 </view>
<view :class="['message-all-'+ 'in']" v-if="!message.flow">
	 <view class="message-audio" :class="['content content-' + 'in']" @click.stop="handlePlay">
	 	<view
	     class="audio-style"
	     :class="{'add-animation': isPlay}"
	   >
		<view class="small"></view>
		<view class="middle"></view>
	    <view class="large"></view>  
	   </view>
	   <view>{{data.second}}″</view>
	 </view>
	 </view>
</view>
</template>

<script lang="ts">
import { defineComponent, watchEffect, reactive, toRefs, ref, onMounted } from 'vue';
import store from "../../../../TUICore/store";
const audio = uni.createInnerAudioContext();
const MessageAudio = defineComponent({
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
	messageData: {
		type: Object,
		default: () => {
		return {};
			}
		}
  },
  setup(props:any, ctx:any) {
    const data = reactive({
      data: {},
			message: {},
			isPlay: false,
			audiotext:'',
			mid:0,
			isPause:0,
			time:0,
    });
		
    watchEffect(()=>{
      data.data = props.data;
	  //根据语音秒数判断语音框长度
	  if(data.data.second){
		  if(data.data.second < 10){
			data.time=data.data.second*5 + 65
			console.log("data.time",data.time) 
		  }else if(data.data.second > 9 && data.data.second < 31){
			  data.time=data.data.second*2 + 90
		  }
		  else if(data.data.second > 30 && data.data.second < 61){
		  			  data.time=data.data.second + 119
		  }
	  }
	  data.time
	  data.message = props.messageData;
	  data.audiotext=store.state.timStore.voicebody[0];
	  data.mid=store.state.timStore.voicebody[1]
    });
		
		onMounted(() => {
			audio.onPlay(() => {
				console.log('开始播放');
			});
			audio.onEnded(() => {
				if(data.isPlay === true) {
					data.isPlay = false
					data.isPause = 0
					console.log('停止播放');
				}	
			});
			audio.onError(e => {
				console.error(e, 'onError');
				// ios 音频播放无声，可能是因为系统开启了静音模式
				uni.showToast({
					icon: 'none',
					title: '该音频暂不支持播放'
				});
			});
			
		})
	const close=()=>{
		store.commit("timStore/setVoicebody","")
	};
    const handlePlay = () => {
		//判断此次点击是否是暂停播放
			if(data.isPause==1){
				audio.pause();
				console.log("暂停播放")
				data.isPause=0
				data.isPlay = false
			}else{
				if (data.data.url) {
					data.isPause=true
					data.isPlay = true
					audio.src = data.data.url;
					audio.play();
				}
				data.isPlay = true
				data.isPause=1
			}
    };

    return {
      ...toRefs(data),
      audio,
      handlePlay,
	  close,
    };
  }
});
export default MessageAudio
</script>
<style lang="scss" scoped>
.voice {
       padding-top: 12px;
       padding-left: 10px;
       margin: 100px auto;
       height: 35px;
       width: 150px;
       // background: #1bbc9b;
       border-radius: 0 7px 7px;
     }
    
     .voicePlay {
       animation-name: voicePlay;
       animation-duration: 1s;
       animation-direction: normal;
       animation-iteration-count: infinite;
       animation-timing-function: steps(3);
     }
     @keyframes voicePlay {
       0% {
         background-position: 0;
       }
       100% {
         background-position: 100%;
       }
    }
	.separate{
		height: 1px;
		background-color: #f1f1f1;
		margin: 0 10rpx;
	}
	.message-all{
		&-out{
			display:flex;
			flex-direction:column;
			align-items:flex-end;
		}
	}
	.imgg{
		display: flex;
		justify-content: center;
	}
	.text{
		padding:15rpx 10rpx 25rpx 13rpx;
	}
	.imag{
		width: 30rpx;
		height: 30rpx;
		​vertical-align:middle;
	}
	.message1{	
		&-out{
			min-height:80rpx;
			margin-top: 3rpx;		
			border-radius: 10px 10px 10px 10px;
			align-items: center;
			position: relative;
			background: #DCEAFD;
			
		}
		&-in{
			min-height:80rpx;
			margin-top: 3rpx;		
			border-radius: 10px 10px 10px 10px;
			align-items: center;
			position: relative;
			background: #fff;
		}
	}
	.message-audio {
		display: flex;
		align-items: center;
		position: relative;
	.message-icon {
		width: 20px;
		height: 20px;
		padding: 0 5px;
	}	
  .icon {
    margin: 0 4px;
  }
	.audio-icon {
		width: 20px;
		height: 20px;
		padding: 0 5px;
	}
	.audio-icon-in {
		transform: rotate(180deg)
	}
	.play-icon {
		position: absolute;
		right: -7px;
		top: 1px;
		width: 6px;
		height: 6px;
		border-radius: 100%;
		background-color: #f73232;
	}
  audio {
    width: 0;
    height: 0;
  }
}
.reserve {
  flex-direction: row-reverse;
}
.mask {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
}
.content {
		padding: 10px 0;
    &-in {
      background: #fff;
      border-radius: 0px 10px 10px 10px;
			.audio-style {
			  display: flex;
			  align-items: center;
			  height: 28px;
			  padding: 0 6px 0 10px;
			  border-radius: 4px;
				.small {
					border: 3px solid #595959;
				  border-top-color: transparent;
				  border-left-color: transparent;
				  border-bottom-color: transparent;
					border-radius: 50%;
					box-sizing: border-box;
				}
				 
				.middle {
				  width: 14px;
				  height: 14px;
				  margin-left: -10px;
				  opacity: 1;
					
				}
				 
				.large {
				  width: 21px;
				  height: 21px;
				  margin-left: -16px;
				  opacity: 1;
				}
				.middle,.large {
					border: 2px solid #595959;
					border-top-color: transparent;
					border-left-color: transparent;
					border-bottom-color: transparent;
					border-radius: 50%;
					box-sizing: border-box;
				}
				&.add-animation {
				  .middle {
				    animation: show2 1s steps(3) infinite;
				  }
				  .large {
				    animation: show3 1s steps(3) infinite;
				  }
				}
			}
    }
    &-out {
			.audio-style {
			  display: flex;
				justify-content: flex-end;
			  align-items: center;
			  height: 28px;
			  padding: 0 10px 0 6px;
			  border-radius: 4px; 
				.middle {
				  width: 14px;
				  height: 14px;
				  margin-right: -10px;
				  opacity: 1;
				}
				 
				.large {
				  width: 21px;
				  height: 21px;
				  margin-right: -16px;
				  opacity: 1;
				}
				.middle,.large {
					border: 2px solid #595959;
					border-top-color: transparent;
					border-right-color: transparent;
					border-bottom-color: transparent;
					border-radius: 50%;
					box-sizing: border-box;
				}
				.small {
					border: 3px solid #595959;
					border-top-color: transparent;
					border-right-color: transparent;
					border-bottom-color: transparent;
					border-radius: 50%;
					box-sizing: border-box;
				}
				&.add-animation {
				  .middle {
				    animation: show2 1s linear infinite;
				  }
				  .large {
				    animation: show3 1s linear infinite;
				  }
				}
			}
		.message {
			display: flex;
			justify-content: flex-end;
		}
      display:flex;
      background: #DCEAFD;
      border-radius: 10px 0px 10px 10px;
	   justify-content:flex-end;
    }
  }
// 语音播放动画
  @keyframes show2 {
		0% {
			opacity: 0;
		}
    30% {
      opacity: 1;
    }
		60% {
			opacity: 1;
		}
    100% {
      opacity: 1;
    }
  }
 
  @keyframes show3 {
    0% {
      opacity:0;
    }
		30% {
		  opacity: 0;
		}
    60% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
</style>
